<template src="./reservationDate.html"></template>

<script>
export default {
  name: "TianDingreseRvationDateComponent",
  props: {
    dateList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      totalDay: 30,
      weekList: [
        {
          value: 0,
          label: "周日"
        },
        {
          value: 1,
          label: "周一"
        },
        {
          value: 2,
          label: "周二"
        },
        {
          value: 3,
          label: "周三"
        },
        {
          value: 4,
          label: "周四"
        },
        {
          value: 5,
          label: "周五"
        },
        {
          value: 6,
          label: "周六"
        }
      ],
      timePeriod: [
        {
          hour: "08:30~12:00",
          flag: false
        },
        {
          hour: "13:00~16:30",
          flag: false
        },
        {
          hour: "18:30~21:30",
          flag: false
        }
      ],
      weekIndexList: [],
      nowMonthList: [],
      nextMonthList: [],
      selectDate: {}
    };
  },
  mounted() {
    console.log(this.dateList);
    this.getDayList();
  },
  methods: {
    getDayList() {
      let date = new Date();
      let currentMonth = date.getMonth() + 1;

      let temp = [];

      for (let i = 0; i < this.totalDay; i++) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let proteWeek = date.getDay();
        let timestamp = date.getTime();

        //重新赋值月小于10添0
        let newMonth = month;
        if (newMonth < 10) {
          newMonth = `0${newMonth}`;
        }
        //重新赋值日小于10添0
        let newDay = day;
        if (newDay < 10) {
          newDay = `0${newDay}`;
        }

        let AppointmentDate = `${year}-${newMonth}-${newDay}`.toString();

        let index = this.dateList.findIndex(
          i => i.AppointmentDate === AppointmentDate
        );

        let timeData = {
          timestamp: timestamp,
          year: year,
          month: month,
          day: day,
          week: this.weekList[proteWeek],
          timePeriod: this.timePeriod,
          appointmentDateItem: this.dateList[index],
          AppointmentDate: AppointmentDate,
          class: {}
        };

        if (timeData.appointmentDateItem !== undefined) {
          timeData.class = {
            reservation: !timeData.appointmentDateItem.IsAppointmentDate,
            expiration: timeData.appointmentDateItem.IsAppointmentDate
          };
        }

        if (i < 7) {
          this.weekIndexList.push(proteWeek);
        }

        if (month == currentMonth) {
          this.nowMonthList.push(timeData);
        } else {
          this.nextMonthList.push(timeData);
        }

        date.setDate(date.getDate() + 1);
      }
    },
    selectedNow: function(data, event) {
      if (data.appointmentDateItem !== undefined) {
        this.selectDate = data;
        this.$emit("updateEvent", this.selectDate);
      }
    },
    selectedNext: function(data, event) {
      if (data.appointmentDateItem !== undefined) {
        this.selectDate = data;
        this.$emit("updateEvent", this.selectDate);
      }
    }
  }
};
</script>

<style lang="scss">
.td-reservation-date {
  .appointmentStatus {
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px 15px 5px;
    span {
      width: 25%;
      font-size: 14px;
      text-align: center;
      i {
        margin-right: 3px;
      }
      &:first-child {
        i {
          color: #ff869a;
        }
      }
      &:last-child {
        i {
          color: #ae5da1;
        }
      }
    }
  }
  .data-picker {
    .week {
      p {
        color: #999 !important;
      }
    }
    .week,
    .wrapper {
      display: flex;
      flex-wrap: wrap;

      p {
        width: 14.28%;
        height: 60px;
        line-height: 60px;
        color: #333;
        font-size: 13px;
        font-family: "微软雅黑";
        text-align: center;
        position: relative !important;
        &.five-sex {
          color: #ff869a !important;
        }
        span:first-child {
          display: block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          margin: 5px auto;
          cursor: pointer;
        }

        .current {
          font-size: 12px !important;
          width: 26px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          position: absolute;
          left: 50%;
          bottom: 6px;
          color: #666;
          transform: translate(-50%, 0);
        }
        &.reservation {
          span:first-child {
            background: #ff869a;
            border-radius: 30px;
            color: #fff;
          }
        }
        &.expiration {
          span:first-child {
            background: #ae5da1;
            border-radius: 30px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

